<template>
	<view>

		<view class="card friends-top" @click="open()">
			<view class="friends-title">
				<image src="/static/icon-images/users.png"></image>
				<view class="text">好友能量贡献</view>
			</view>

			<view class="friends-list">
				<view class="card friends-item">
					<view class="friends-card">
						<image src="/static/myimages/hg.png" class="friends-icon"></image>
						<view class="friends-tit">团队等级</view>
					</view>
					<view class="num">v{{user.userLevel||0}}</view>
				</view>
				<view class="card friends-item">
					<view class="friends-card">
						<image src="/static/myimages/team.png" class="friends-icon"></image>
						<view class="friends-tit">团队贡献</view>
					</view>
					<view class="num">
						{{ Number((user.inDirFrdContrib + user.dirFrdContrib).toFixed(4)) || 0 }}
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="show" @close="close" @open="open" mode="center" bgColor="transparent">
			<view class="popup-box">
				<view style="width: 600rpx;height: auto;">
					<view class="popup-top">
						<view class="popup-title">等级说明</view>
						<view class="close-btn" @click="close()">
							<image src="/static/icon-images/close.png" mode="widthFix"></image>
						</view>
					</view>

					<view style="padding-top: 30rpx;padding-bottom: 10rpx;">
						<view class="level-top">
							<view class="level-box">团队等级</view>
							<view class="level-box">直推人数</view>
							<view class="level-box">团队人数</view>
							<view class="level-box">分成比例</view>
						</view>

						<view class="level-top" v-for="(item,index) in level" :key="index">
							<view class="level-box">{{item.userLevel}}</view>
							<view class="level-box">{{item.userDirectCount}}</view>
							<view class="level-box">{{item.userTeamCount}}</view>
							<view class="level-box">{{item.bilv}}</view>
						</view>

					</view>


				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		friendContrib,
		userlevelConfig
	} from '@/api/my.js'
	export default {
		data() {
			return {
				show: false,
				user: {},
				level: {}
			};
		},
		methods: {
			open() {
				this.show = true
				this.getUserlevelConfig()
			},
			close() {
				this.show = false
			},
			async getContribution() {
				let res = await friendContrib()
				this.user = res.data
			},
			async getUserlevelConfig() {
				let res = await userlevelConfig()
				this.level = res.data
			}
		}
	}
</script>

<style lang="scss">
	.friends-top {
		padding: 20rpx;
	}

	.friends-item {
		padding: 20rpx;
		flex: 1;
	}

	.friends-list {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.friends-card {
		display: flex;
		align-items: flex-end;
		// justify-content: ;
		color: #e2e8f0;
	}

	.friends-icon {
		display: block;
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	.friends-tit {
		font-size: 26rpx;
		line-height: 1.1;
		color: #e2e8f0;
	}

	.num {
		font-weight: 700;
		color: #e2e8f0;
		font-size: 40rpx;
		padding-left: 50rpx;
	}

	.friends-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			display: block;
		}

		.text {
			color: #e2e8f0;
			font-weight: 600;
			font-size: 30rpx;
			margin-left: 10rpx;
		}
	}


	.popup-box {
		background: linear-gradient(135deg, #0a1a3a 0%, #050a1a 100%);
		border: 1rpx solid rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		overflow-y: auto;
		padding: 30rpx;

		.popup-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.popup-title {
			font-weight: 700;
			font-size: 38rpx;
			color: #e2e8f0;
		}

		.close-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.15);

			image {
				display: block;
				width: 28rpx;
				height: 28rpx;
			}
		}

		.level-top {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.level-box {
			flex: 1;
			text-align: center;
			color: #e2e8f0;
			font-size: 30rpx;
			font-weight: 500;
		}

	}
</style>